<template>
  <div class="main">
    <div class="content">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-position="top"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="请选择数据源"
          prop="mini_app_id"
          class="miniapp"
        >
          <miniAppSelect
            label=" "
            @result="miniAppResult"
          />
        </el-form-item>
        <!-- prop="module_ids" -->
        <el-form-item
          label="关联内容模块"
          prop="module_ids"
        >

          <el-checkbox-group
            v-model="ruleForm.module_ids"
            class="checkboxgroup"
          >
            <span
              v-for="(item,index) in banberList"
              :key="index"
              style="display: flex;align-items: center;"
              class="checkbox_span"
            >
              <el-checkbox :label="item.type">
                {{ item.name }}
              </el-checkbox>
              <i
                class="el-icon-question icon"
                @click="showDetailImage(item)"
              ></i>
            </span>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item prop="is_sync_title">
          <template slot="label">
            同步已选栏位的名称和图标
          </template>
          <el-radio-group v-model="ruleForm.is_sync_title">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="sync_type">
          <template slot="label">
            <span>选择栏位同步方式</span><el-tooltip
              class="item"
              effect="dark"
              placement="top"
            >
              <div
                slot="content"
                class="tooltipLine"
              >
                <p>1、追加内容配置:同步栏位管理+剧场管理，仅同步新增数据，若数据已存在被同步小程序中，则不会被覆盖;</p>
                <p>2、替换栏位内容:仅替换被同步小程序下剧场管理中已上架短剧的栏位内容</p>
              </div>
              <i
                class="el-icon-question"
                style="margin-left:2px;font-size:16px;"
              ></i>
            </el-tooltip>
          </template>
          <el-radio-group v-model="ruleForm.sync_type">
            <el-radio :label="1">追加内容配置</el-radio>
            <el-radio :label="2">替换栏位内容</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="checkBox rowFlex columnCenter">
          <el-checkbox v-model="checkBoxValue"></el-checkbox><span style="margin-left:10px;">关联充值栏位</span>
        </div>
        <div class="chooseMiniapp">
          <div class="transfer rowFlex columnCenter">
            <div class="transferItem">
              <div class="subTitle rowFlex columnCenter">
                <el-checkbox
                  v-model="checkAll"
                  :indeterminate="isIndeterminate"
                  @change="handleCheckAllChange"
                >
                  <span>选取小程序</span>
                </el-checkbox>
              </div>
              <div class="transferContent">
                <el-input
                  v-model="miniapp"
                  size="mini"
                  clearable
                  placeholder="请输入小程序名称/原始ID/AppId"
                  suffix-icon="el-icon-search"
                  style="margin-top:20px;"
                  @change="search"
                >
                </el-input>
                <el-checkbox-group
                  v-model="checkAppList"
                  class="columnFlex"
                  @change="handleCheckedCitiesChange"
                >
                  <el-checkbox
                    v-for="(item,index) in allCheckList"
                    :key="index"
                    style="margin-top:20px;"
                    :label="item"
                  >
                    {{ item.name }}
                    <svg-icon
                      v-if="item.app_type==1"
                      icon-class="miniapp"
                      class="imageIcon"
                    />
                    <svg-icon
                      v-else
                      icon-class="douyin"
                      class="imageIcon"
                    />
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div
              class="goRight rowFlex allCenter"
              @click="goRightContent"
            ><i class="el-icon-arrow-right"></i></div>
            <div class="transferItem">
              <div class="subTitle rowFlex columnCenter">
                <span>同步列表</span>
              </div>
              <div class="transferContent">
                <div
                  v-for="(item,index) in rightList"
                  :key="index"
                  class="rowFlex columnCenter spaceBetween"
                >
                  <p class="deleteItem">{{ item.name }}</p>
                  <i
                    class="el-icon-delete icon"
                    @click="removeItem(item,index)"
                  ></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <div class="dialog-footer rowFlex">
      <div class="btns">
        <el-button
          class="downVideo"
          type="primary"
          @click="offlinePlayLet"
        >一键同步</el-button>
      </div>
    </div>
    <el-drawer
      :visible="showImage"
      size="420px"
      :modal="false"
      :modal-append-to-body="false"
      class="giftDetails"
      @close="showImage = false"
    >
      <div class="imageContent rowFlex allCenter">
        <el-image
          :src="imageSrc"
          fit="contain"
          style="width:338px;"
        ></el-image>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import miniAppSelect from '@/common/component/form/miniAppSelect.vue'
import { mapState, mapActions } from 'vuex'
import { syncPlayletMiniApp } from '@/api/content'
import { miniAppList, getranklist } from '@/api/common'

export default {
  components: {
    miniAppSelect
  },
  computed: {
    ...mapState('user', ['miniAppList', 'mini_app_id'])
  },
  watch: {
    miniAppList(newVal, oldVal) {
      // const list = newVal.filter((v) =>
      //   this.rightList.every((val) => val.id !== v.id)
      // )
      // this.allCheckList = JSON.parse(JSON.stringify(list))
    }
  },
  data() {
    return {
      miniapp: '',
      checkBoxValue: true,
      showImage: false,
      checkAll: false,
      checkAppList: [],
      allCheckList: [],
      rightList: [],
      isIndeterminate: false,
      imageSrc: '',
      ruleForm: {
        mini_app_id: '',
        module_ids: [],
        is_sync_title: '',
        sync_type: ''
      },
      rules: {
        mini_app_id: [{ required: true, message: '请选择数据源', trigger: 'change' }],
        module_ids: [{ required: true, message: '请选择关联内容模块', trigger: 'change' }],
        sync_type: [{ required: true, message: '请选择内容同步方式', trigger: 'change' }],
        is_sync_title: [{ required: true, message: '请选择是否同步栏位名称和图标', trigger: 'change' }]
      },

      banberList: [
        { type: '4', name: '短剧推荐', url: '	https://zhangyu-pub.oss-cn-hangzhou.aliyuncs.com/playlet/1713515104_rctryEjxrb.png' },
        { type: '2', name: '短剧排行', url: '	https://zhangyu-pub.oss-cn-hangzhou.aliyuncs.com/playlet/1713514991_aJMrNCbbWc.png' },
        { type: '1', name: '热门短剧', url: '	https://zhangyu-pub.oss-cn-hangzhou.aliyuncs.com/playlet/1713515067_ZGHpAhcjh4.png' },
        { type: '6', name: '轮播图', url: '	https://zhangyu-pub.oss-cn-hangzhou.aliyuncs.com/playlet/1713515138_3hE3RD2Jrp.png' }
        // { type: '7', name: '充值档位' }
      ]
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    ...mapActions('user', ['requestMiniApp']),
    handleCheckAllChange(val) {
      console.log(val)
      val ? (this.checkAppList = [...this.allCheckList]) : (this.checkAppList = [])
      this.isIndeterminate = false
    },
    search() {
      const data = {
        key_word: this.miniapp
      }
      miniAppList(data).then((res) => {
        const list = res.data.filter((v) => this.rightList.every((val) => val.id !== v.id))
        this.allCheckList = JSON.parse(JSON.stringify(list))
      })
    },
    showDetailImage(item) {
      if (this.imageSrc === item.url) {
        this.showImage = false
        this.imageSrc = ''
      } else {
        this.imageSrc = item.url
        this.showImage = true
      }
    },
    offlinePlayLet() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.rightList.length === 0) {
            this.$message.warning('请选取小程序')
            return
          }
          this.$confirm(`未经微信小程序官方审核后的短剧，冒然同步到小程序栏位中，有被处罚的风险。`, '提示', {
            confirmButtonText: '仍要同步',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              this.submitData()
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              })
            })
        } else {
        }
      })
    },
    submitData() {
      const list = this.rightList.map((item) => {
        return {
          mini_app_id: item.id
        }
      })
      this.checkBoxValue ? this.ruleForm.module_ids.push(7) : ''
      const data = {
        mini_app_id: this.ruleForm.mini_app_id,
        module_ids: this.ruleForm.module_ids.toString(),
        target_config: list,
        is_sync_title: this.ruleForm.is_sync_title,
        sync_type: this.ruleForm.sync_type
      }
      syncPlayletMiniApp(data).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          this.close()
        }
      })
    },
    goRightContent() {
      this.rightList = this.rightList.concat(this.checkAppList)
      const list = this.allCheckList.filter((v) => this.checkAppList.every((val) => val.id !== v.id))
      this.allCheckList = list
      this.checkAppList = []
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = this.checkAppList.length === this.miniAppList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.miniAppList.length
    },
    miniAppResult(value) {
      this.ruleForm.mini_app_id = value
      if (value) {
        this.ongetranklist(value)
      }
    },
    async ongetranklist(value) {
      const res = await getranklist({ mini_app_id: value })
      this.banberList = res.data.map((item, index) => {
        return {
          type: item.type + '',
          name: item.title,
          url: item.type == 1 ? 'https://zhangyu-pub.oss-cn-hangzhou.aliyuncs.com/playlet/1713515067_ZGHpAhcjh4.png' : item.type == 2 ? 'https://zhangyu-pub.oss-cn-hangzhou.aliyuncs.com/playlet/1713514991_aJMrNCbbWc.png' : item.type == 4 ? 'https://zhangyu-pub.oss-cn-hangzhou.aliyuncs.com/playlet/1713515104_rctryEjxrb.png' : item.type == 6 ? 'https://zhangyu-pub.oss-cn-hangzhou.aliyuncs.com/playlet/1713515138_3hE3RD2Jrp.png' : ''
        }
      })
    },
    removeItem(item, index) {
      this.rightList.splice(index, 1)
      this.allCheckList.push(item)
    },
    close() {
      this.$emit('cancel')
    },
    submit() {
      this.$emit('ok')
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog-footer {
  z-index: 100;
}
.content {
  width: 686px;
  padding: 20px;
  padding-bottom: 70px;
  .chooseMiniapp {
  }
  .icon {
    font-size: 16px;
    color: #d9d9d9;
    margin-left: 5px;
    cursor: pointer;
  }
  .checkboxgroup {
    background: #f7f8fa;
    display: flex;
    align-items: center;
  }
  .checkbox_span {
    margin-left: 10px;
  }
  .checkbox_span::after {
    content: '';
    display: inline;
    width: 1px;
    height: 17px;
    border: 1px solid #d6d9e0;
    margin-left: 10px;
  }
  .checkBox {
    width: 100%;
    height: 46px;
    background: #fdf6ec;
    border-radius: 4px;
    border: 1px solid #f2bc69;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    padding: 0 20px;
    margin-bottom: 20px;
  }

  .goRight {
    width: 28px;
    height: 28px;
    background: #06c261;
    border-radius: 4px;
    color: #ffffff;
    font-size: 16px;
    margin: 0 20px;
    cursor: pointer;
  }
  .title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-bottom: 10px;
  }
  .miniapp {
    ::v-deep .el-select {
      width: 100%;
    }
    ::v-deep .el-input {
      width: 100%;
    }
  }
  .transfer {
    .transferItem {
      width: 290px;
      height: 482px;
      border-radius: 4px;
      border: 1px solid #d9d9d9;
      .subTitle {
        width: 288px;
        height: 40px;
        background: #f5f7fa;
        border-radius: 4px 4px 0px 0px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.88);
        padding: 0 20px;
        line-height: 40px;
        span {
          font-weight: 500;
          font-size: 14px;
        }
      }
      .transferContent {
        width: 100%;
        height: calc(100% - 50px);
        overflow: auto;
        padding: 0 20px;
        .deleteItem {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.88);
          margin: 10px 0;
        }
        .icon {
          cursor: pointer;
          color: #d9d9d9;
        }
      }
    }
    .transferLeft {
    }
    .transferRight {
    }
  }
}
.downVideo {
  // margin-top: 20px;
  // margin-right: 20px;
  // float: right;
}
.imageContent {
  width: 100%;
  height: 100%;
  background: #f5f7fa;
}
.giftDetails {
  position: fixed;
  right: 705px;
  top: 0;
  box-shadow: 0px 9px 28px 0px rgba(0, 0, 0, 0.05);
}
</style>